<script setup>
import { ref } from 'vue'
import { onReachBottom, onShow } from '@dcloudio/uni-app'
import { consultListApi, consultDeleteApi } from '@/apis/consult.js'
import { useButtonStyle } from '@/composables/useButtonStyle.js'

// 正确使用组合式函数获取按钮样式
const buttonStyle = useButtonStyle()

const params = ref({
	pageSize: 10,
	pageNum: 1
})

const loadStatus = ref({
	status: "loadmore", // loadmore, loading, nomore
	noMore: false,
	loading: false
})

const consultationList = ref([])

const getConsultationList = async () => {
	// 防止重复加载
	if (loadStatus.value.noMore || loadStatus.value.loading) return
	loadStatus.value.loading = true
	loadStatus.value.status = "loading"
	try {
		const res = await consultListApi(params.value)
		const { rows, total } = res
		// 如果是第一页，重置数据
		if (params.value.pageNum === 1) {
			consultationList.value = rows
		} else {
			consultationList.value = [...consultationList.value, ...rows]
		}
		// 判断是否还有更多数据
		if (rows.length < params.value.pageSize || consultationList.value.length >= total) {
			loadStatus.value.noMore = true
			loadStatus.value.status = "nomore"
		} else {
			loadStatus.value.status = "loadmore"
		}
		// 只有成功获取数据后才增加页码
		params.value.pageNum++
	} catch {
		// 失败时恢复状态
		loadStatus.value.status = "loadmore"
	} finally {
		loadStatus.value.loading = false
	}
}

onShow(() => {
	params.value.pageNum = 1
	loadStatus.value.status = "loadmore"
	consultationList.value = []
	loadStatus.value.loading = false
	loadStatus.value.noMore = false
	getConsultationList()
})

// 上拉加载更多
onReachBottom(() => {
	if (!loadStatus.value.noMore) {
		getConsultationList()
	}
})

// 删除操作
const handleDelete = async (val) => {
	uni.showModal({
		title: '温馨提示',
		content: `确定要删除${val.content}的数据吗?`,
		success: async res => {
			try {
				uni.showLoading({ title: '删除中...', mask: true })
				await consultDeleteApi(val.id)
				consultationList.value = consultationList.value.filter(item => item.id !== val.id)
				uni.$u.toast("删除成功")
			} catch {
				uni.$u.toast("删除失败")
			} finally {
				uni.hideLoading()
			}
		}
	})

}

// 编辑操作
const handleEdit = (item) => {
	const data = JSON.stringify(item)
	uni.navigateTo({
		url: `/pages/consult/consultForm?data=${data}`
	})
}

// 新增咨询
const handleAdd = () => {
	uni.navigateTo({
		url: '/pages/consult/consultForm'
	})
}
</script>

<template>
	<view class="page_container">
		<!-- 列表内容 -->
		<view class="list-container pt">
			<view v-for="item in consultationList" :key="item.id" class="list-item">
				<view class="item-header">
					<text class="item-title">反馈类型：{{ item.consultType }}</text>
				</view>
				<view class="item-content">
					<text class="item-label">咨询意见：</text>
					<text class="item-value">{{ item.content || '暂无意见' }}</text>
				</view>
				<view class="item-footer">
					<view class="time-info">
						<text class="time-label">提交时间：</text>
						<text class="time-value">{{ item.createdAt }}</text>
					</view>
				</view>
				<!-- 操作按钮 - 现在放在底部 -->
				<view class="item-actions">
					<u-button size="mini" :custom-style="buttonStyle.customStyle" type="primary" plain @click="handleEdit(item)">
						<u-icon name="edit-pen" size="30"></u-icon> 编辑
					</u-button>
					<u-button style="margin-left: 20rpx;" size="mini" :custom-style="buttonStyle.customStyle" type="error" plain
						@click="handleDelete(item)">
						<u-icon name="trash" size="30"></u-icon> 删除
					</u-button>
				</view>
			</view>
			<!-- 加载更多状态 -->
			<view class="loadmore-status">
				<text v-if="loadStatus.status === 'loading'">加载中...</text>
				<text v-else-if="loadStatus.status === 'nomore'">没有更多了</text>
				<text v-else-if="loadStatus.status === 'loadmore'">上拉加载更多</text>
			</view>
			<!-- 空状态 -->
			<u-empty v-if="consultationList.length === 0 && loadStatus.status !== 'loading'" mode="list"
				icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
		<!-- 新增按钮 -->
		<view class="add-btn">
			<u-button type="primary" shape="circle" icon="plus" @click="handleAdd">新增咨询</u-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.page_container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.list-container {
	flex: 1;
	overflow-y: auto;
}

.list-item {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	color: $list-color;
	font-size: $list-font-size;

	.item-header {
		margin-bottom: 16rpx;

		.item-title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.item-content {
		margin-bottom: 16rpx;
	}

	.item-footer {
		.time-info {
			display: flex;
			margin-top: 8rpx;
		}
	}

	.item-actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #f0f0f0;

		::v-deep .u-button {
			height: 60rpx;
			line-height: 60rpx;
			padding: 0 20rpx;
			font-size: 26rpx;
		}
	}
}

.loadmore-status {
	text-align: center;
	padding: 20rpx;
	color: #999;
	font-size: 26rpx;
}

.add-btn {
	position: fixed;
	bottom: 40rpx;
	right: 40rpx;
	z-index: 100;

}
</style>